<template>
  <div>
    <div v-if="combin.dictype == 'input'"  class="form_row_input">
      <span class="titlestyle" :style="combin.tityle">
        {{ combin.title }}
      </span>
      <vxe-input
        v-model="combin.price"
        :size="combin.size"
        :prefix-icon="combin.prefix"
        :suffix-icon="combin.suffix"
        :type="combin.type"
        :valueFormat="combin.valueFormat"
        :disabled="combin.disabled"
        :clearable="combin.clearable"
        :min="combin.min"
        :max="combin.max"
        :step="combin.step"
        :placeholder="combin.placeholder"
        @click="inputClick"
        @change="inputChange"
        :style="combin.style"
      ></vxe-input>
    </div>
    <!-- 修改为vxe的单选 -->
    <div v-if="combin.dictype == 'radio' && combin.button == '0'" class="form_row_radio">
      <span class="titlestyle">
        {{ combin.title }}
      </span>
      <vxe-radio-group
        v-model="combin.price"
        :disabled="combin.disabled"
        @change="radioChange"
      >
        <vxe-radio
          :size="combin.size"
          v-for="item in priceList"
          :key="item.key"
          :label="item.key"
          :content="item.value"
          >{{ item.value }}</vxe-radio
        >
      </vxe-radio-group>
    </div>

    <div v-if="combin.dictype == 'radio' && combin.button == '1'"  class="form_row_radio">
      <span class="titlestyle">
        {{ combin.title }}
      </span>

      <vxe-radio-group v-model="combin.price" @change="radioChange">
        <vxe-radio-button
          :size="combin.size"
          v-for="item in priceList"
          :key="item.key"
          :label="item.key"
          :content="item.value"
          >{{ item.value }}</vxe-radio-button
        >
      </vxe-radio-group>
    </div>

    <div v-if="combin.dictype == 'checkbox'" class="form_row_checkbox">
      <span class="titlestyle">
        {{ combin.title }}
      </span>

      <vxe-checkbox-group
        v-model="combin.price"
        @change="checkChange"
        :disabled="combin.disabled"

      >
        <vxe-checkbox
          v-for="item in priceList"
          :key="item.key"
          :label="item.key"
          :size="combin.size"
          :content="item.value"
           :style="combin.style"
          >{{ item.value }}</vxe-checkbox
        >
      </vxe-checkbox-group>
    </div>

    <div v-if="combin.dictype == 'select'" class="form_row_checkbox">
      <span class="titlestyle"  :style="combin.tityle">
        {{ combin.title }}
      </span>
      <vxe-select
        v-model="combin.price"
        :size="combin.size"
        :disabled="combin.disabled"
        @change="selectChange"
        :style="combin.style"
        :placeholder="combin.placeholder"
      >
        <vxe-option
          v-for="item in priceList"
          :key="item.key"
          :label="item.value"
          :value="item.key"

        ></vxe-option>
      </vxe-select>
    </div>
    <div v-if="combin.dictype == 'textarea'">
      <span class="titlestyle"  :style="combin.tityle">
        {{ combin.title }}
      </span>
      <vxe-textarea
        v-model="combin.price"
        :size="combin.size"
        :disabled="combin.disabled"
        :style="combin.style"
        :placeholder="combin.placeholder"
        :maxlength="combin.maxlength"
        :autosize="combin.autosize"
        :readonly="combin.readonly"
      >
        
      </vxe-textarea>
    </div>
  </div>
</template>

<script>
import request from "@/utils/requestutil";
export default {
  props: {
    combin: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },

  data() {
    return {
      priceList: []
    };
  },
  mounted() {
    // if (this.combin.dictype == "checkbox") {
    //   this.price = [];
    // }
    if (this.combin.dickey) {
      request({
        url: "dicload",
        urlparam: [this.combin.dickey]
      }).then(dt => {
        // console.log(dt);
        this.priceList = dt.data;
        // console.log(this.priceList);
        if (dt.errorCode == "1" && dt.data) {
        } else {
        }
      });
    }
  },
  methods: {
    radioChange(val) {
      this.$emit("radioChange", val);
    },
    checkChange(val) {
      this.$emit("checkChange", val);
    },
    selectChange(val) {
      // console.log(val);
      this.$emit("selectChange", val);
    },
    inputChange(val) {
      // console.log(val);
      this.$emit("inputChange", val.value);
    },
    inputClick(val){
      console.log(val);
      this.$emit("inputClick", val.value);
    }
  }
};
</script>
<style lang="scss" scoped>
.titlestyle {
  display: inline-block;
  /* width: 130px; */
  padding-right: 4px;
  text-align: right;
}
.form_row_input{
  width: 100%; position: relative; height: 30px; margin-bottom: 8px; line-height: 30px;
 .titlestyle {left: 0px; top: 0px; height: 30px; text-align: right;}
 .vxe-input{ width: 100%;}
}
</style>
